<template>
  <div class="register-container">
    <div class="register-wrapper">
      <div class="register-left">
        <img src="../assets/imgs/inspiration.png" class="register-image" alt="注册背景">
        <div class="image-overlay">
          <h2>加入我们</h2>
          <p>开启您的博客创作之旅</p>
        </div>
      </div>
      <div class="register-right">
        <div class="register-header">
          <h1>欢迎注册</h1>
          <p>创建您的博客账户，分享精彩内容</p>
        </div>
        <el-form :model="form" :rules="rules" ref="formRef" class="register-form">
          <el-form-item prop="username">
            <el-input 
              size="large" 
              prefix-icon="el-icon-user" 
              placeholder="请输入账号" 
              v-model="form.username"
              class="register-input">
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input 
              size="large" 
              prefix-icon="el-icon-lock" 
              placeholder="请输入密码" 
              show-password  
              v-model="form.password"
              class="register-input">
            </el-input>
          </el-form-item>
          <el-form-item prop="confirmPass">
            <el-input 
              size="large" 
              prefix-icon="el-icon-lock" 
              placeholder="请确认密码" 
              show-password  
              v-model="form.confirmPass"
              class="register-input">
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button 
              size="large" 
              class="register-btn" 
              @click="register">
              <i class="el-icon-user-solid"></i>
              注册账户
            </el-button>
          </el-form-item>
          <div class="login-link">
            <span>已有账号？</span>
            <router-link to="/login">立即登录</router-link>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Register",
  data() {
    // 验证码校验
    const validatePassword = (rule, confirmPass, callback) => {
      if (confirmPass === '') {
        callback(new Error('请确认密码'))
      } else if (confirmPass !== this.form.password) {
        callback(new Error('两次输入的密码不一致'))
      } else {
        callback()
      }
    }
    return {
      form: { role: 'USER' },
      rules: {
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
        confirmPass: [
          { validator: validatePassword, trigger: 'blur' }
        ]
      }
    }
  },
  created() {

  },
  methods: {
    register() {
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
          // 验证通过
          this.$request.post('/register', this.form).then(res => {
            if (res.code === '200') {
              this.$router.push('/login')  // 跳转登录页面
              this.$message.success('注册成功')
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.register-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  position: relative;
  overflow: hidden;
}

.register-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("@/assets/imgs/questions-4027963_1280.jpg") center/cover;
  opacity: 0.1;
  z-index: 0;
}

.register-wrapper {
  display: flex;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  width: 100%;
  max-width: 900px;
  min-height: 600px;
  position: relative;
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.register-left {
  flex: 1;
  position: relative;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.register-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
  position: absolute;
  top: 0;
  left: 0;
}

.image-overlay {
  position: relative;
  z-index: 2;
  text-align: center;
  color: white;
  padding: 40px;
}

.image-overlay h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 16px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.image-overlay p {
  font-size: 1.1rem;
  opacity: 0.9;
  line-height: 1.6;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
}

.register-right {
  flex: 1;
  padding: 60px 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
}

.register-header {
  text-align: center;
  margin-bottom: 40px;
}

.register-header h1 {
  font-size: 2rem;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 8px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.register-header p {
  color: #7f8c8d;
  font-size: 1rem;
  line-height: 1.5;
}

.register-form {
  width: 100%;
}

/deep/.register-input .el-input__inner {
  height: 50px;
  border-radius: 12px;
  border: 2px solid rgba(102, 126, 234, 0.1);
  background: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  padding-left: 45px;
  transition: all 0.3s ease;
}

/deep/.register-input .el-input__inner:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
  background: rgba(255, 255, 255, 0.95);
}

/deep/.register-input .el-input__prefix {
  left: 15px;
  color: #667eea;
}

/deep/.register-input .el-input__suffix {
  right: 15px;
}

.register-btn {
  width: 100%;
  height: 50px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  color: white;
  transition: all 0.3s ease;
  margin-top: 10px;
}

.register-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
}

.register-btn:active {
  transform: translateY(0);
}

.register-btn i {
  margin-right: 8px;
}

.login-link {
  text-align: center;
  margin-top: 24px;
  font-size: 14px;
}

.login-link span {
  color: #7f8c8d;
  margin-right: 8px;
}

.login-link a {
  color: #667eea;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}

.login-link a:hover {
  color: #764ba2;
  text-decoration: underline;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .register-wrapper {
    flex-direction: column;
    max-width: 400px;
    margin: 20px;
  }
  
  .register-left {
    min-height: 200px;
  }
  
  .register-right {
    padding: 40px 30px;
  }
  
  .image-overlay h2 {
    font-size: 1.8rem;
  }
  
  .register-header h1 {
    font-size: 1.5rem;
  }
}
</style>